import React from 'react';

const ResultScreen = ({ correctAnswers, totalQuestions, wrongAnswers, onRestart, onReviewWrong }) => {
  const score = Math.round((correctAnswers / totalQuestions) * 100);
  
  const getScoreMessage = () => {
    if (score >= 90) return '太棒了！你的日语水平很高！🎉';
    if (score >= 80) return '很好！继续加油！👍';
    if (score >= 70) return '不错！还有提升空间！💪';
    if (score >= 60) return '及格了！需要多练习！📚';
    return '需要加强学习！不要气馁！💪';
  };

  const getScoreColor = () => {
    if (score >= 90) return '#28a745';
    if (score >= 80) return '#17a2b8';
    if (score >= 70) return '#ffc107';
    if (score >= 60) return '#fd7e14';
    return '#dc3545';
  };

  return (
    <div className="card">
      <h2 style={{ textAlign: 'center', marginBottom: '30px' }}>学习完成！</h2>
      
      <div style={{ textAlign: 'center', marginBottom: '30px' }}>
        <div style={{ 
          fontSize: '48px', 
          fontWeight: 'bold', 
          color: getScoreColor(),
          marginBottom: '10px'
        }}>
          {score}%
        </div>
        <div style={{ fontSize: '20px', color: '#666', marginBottom: '20px' }}>
          {getScoreMessage()}
        </div>
        <div style={{ fontSize: '18px', color: '#333' }}>
          答对 {correctAnswers} 题，答错 {totalQuestions - correctAnswers} 题
        </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'center', gap: '20px', marginBottom: '30px' }}>
        <button className="btn" onClick={onRestart}>
          重新开始
        </button>
        {wrongAnswers.length > 0 && (
          <button className="btn" onClick={onReviewWrong}>
            复习错题 ({wrongAnswers.length})
          </button>
        )}
      </div>

      {wrongAnswers.length > 0 && (
        <div className="card" style={{ backgroundColor: '#f8f9fa' }}>
          <h3>错题总结</h3>
          <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
            {wrongAnswers.map((wrong, index) => (
              <div key={index} style={{ 
                padding: '15px', 
                margin: '10px 0', 
                backgroundColor: '#fff', 
                borderRadius: '8px',
                border: '1px solid #e1e5e9'
              }}>
                <div style={{ marginBottom: '5px' }}>
                  <strong>题目：</strong>{wrong.question}
                </div>
                <div style={{ marginBottom: '5px' }}>
                  <strong>你的答案：</strong>
                  <span style={{ color: '#dc3545' }}>{wrong.userAnswer}</span>
                </div>
                <div>
                  <strong>正确答案：</strong>
                  <span style={{ color: '#28a745' }}>{wrong.correctAnswer}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      <div style={{ textAlign: 'center', marginTop: '30px', color: '#666' }}>
        <p>💡 提示：错题已自动保存到错题本，可以随时复习！</p>
      </div>
    </div>
  );
};

export default ResultScreen; 